<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <link rel="stylesheet" th:href="@{/css/custom-style.css}">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.min.css}">
    <script th:src="@{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.1.3/js/bootstrap.min.js}"></script>
    <style>
        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
        }
    </style>
</head>
<body>

<div th:replace="templates::topbar(currentPage='register')"></div>
<div class="container text-center">
    <div class="form-signin">
        <img class="mb-4" src="" alt="" width="72" height="72">
        <h1 class="h3 mb-3 font-weight-normal">Please sign up</h1>
        <label for="inputUsername" class="sr-only">Username</label>
        <input name="userName" id="inputUsername" class="form-control" placeholder="Username" required="" autofocus="" type="text">
        <label for="inputPassword" class="sr-only">Password</label>
        <input name="password" id="inputPassword" class="form-control" placeholder="Password" required="" type="password">
        <p id="errorMessage" class="text-danger"></p>
        <button id="registerButton" class="btn btn-lg btn-primary btn-block">Sign up</button>
        <p class="mt-5 mb-3 text-muted">Good Luck And Have Fun</p>
    </div>
</div>

<script>

    function checkValidation(userName, password) {
        var userNameInput = $('#inputUsername');
        var passwordInput = $('#inputPassword');
        var nameReg = /^[A-Za-z_0-9]{3,18}$/;
        var pwdReg = /^[A-Za-z_0-90]{6,18}$/;
        if (!nameReg.test(userName)) {
            userNameInput.addClass('is-invalid');
            userNameInput.removeClass('is-valid');
            return 'Username should only contains English letters, numbers and _. It should be 3-18 characters';
        } else if (!pwdReg.test(password)) {
            userNameInput.addClass('is-valid');
            userNameInput.removeClass('is-invalid');
            passwordInput.addClass('is-invalid');
            return 'Password should only contains English letters, numbers and _. It should be 6-18 characters';
        }
        return "";
    }

    $('#registerButton').click(function () {
        var userNameInput = $('#inputUsername');
        var passwordInput = $('#inputPassword');
        var userName = userNameInput.val();
        var password = passwordInput.val();
        var errorMessage = $('#errorMessage');
        errorMessage.empty();
        var msg = checkValidation(userName, password);
        if (msg) {
            errorMessage.text(msg);
        } else {
            var uploadParam = [
                {name: 'userName', value: userName},
                {name: 'password', value: password}
            ];
            $.ajax({
                url: '/user',
                type: 'POST',
                data: $.param(uploadParam),
                success: function (result) {
                    if (result.code === -1) {
                        errorMessage.text(result.msg);
                    } else {
                        $(location).attr('href', '/');
                    }
                }
            });
        }
    });
</script>

</body>
</html>